<style>
    body {
        font-family: Arial, sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>
<div id="privateMessages">
    <div id="unreadCount" style="display: none; color: red; font-weight: bold;"></div>
</div>
<script>
    const ws = new WebSocket('ws://localhost:8080');

    // WebSocket消息接收处理函数
    ws.onmessage = (event) => {
        const message = JSON.parse(event.data);
        switch (message.type) {
            case 'PRIVATE_MESSAGE':
                displayPrivateMessage(message.content);
                break;
            case 'UNREAD_COUNT':
                updateUnreadCount(message.count);
                break;
            case 'GROUP_MESSAGE':
                displayGroupMessage(message.content);
                break;
            case 'SYSTEM_MESSAGE':
                displaySystemMessage(message.content);
                break;
        }
    };

    function displayPrivateMessage(content) {
        const messagesDiv = document.getElementById('privateMessages');
        const messageDiv = document.createElement('div');
        messageDiv.innerText = content;
        messagesDiv.appendChild(messageDiv);
    }

    function updateUnreadCount(count) {
        const unreadCountDiv = document.getElementById('unreadCount');
        if (count > 0) {
            unreadCountDiv.innerText = `未读消息: ${count}`;
            unreadCountDiv.style.display = 'block';
        } else {
            unreadCountDiv.style.display = 'none';
        }
    }

    function displayGroupMessage(content) {
        const messagesDiv = document.getElementById('groupMessages');
        const messageDiv = document.createElement('div');
        messageDiv.innerText = content;
        messagesDiv.appendChild(messageDiv);
    }

    function displaySystemMessage(content) {
        const messagesDiv = document.getElementById('systemMessages');
        const messageDiv = document.createElement('div');
        messageDiv.innerText = content;
        messagesDiv.appendChild(messageDiv);
    }
</script>